<template>
  <div style="margin-left: 300px;margin-top: 200px">
    <el-card class="box-card" style="width: 300px">
<el-upload
    class="upload-demo"
    ref="upload"
    multiple
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">上传文件</div>
</el-upload>
    </el-card>
    <el-card  class="box-card" style="width: 300px;margin-top: 100px">
      <el-button size="small" type="danger" @click="dialogVisible=true">清除历史数据</el-button>
    </el-card>
    <el-dialog title="历史数据清除" :visible.sync="dialogVisible" width="30%">
      <!-- 提示信息 -->
      <p style="color: red;">此功能用于清除已经失效的数据，数据清除后将不能恢复，请谨慎操作！</p>

      <!-- 选择日期 -->
      <el-date-picker
        v-model="selectedDate"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
      <p style="color: crimson">注：删除此日期以前的所有数据</p>

      <!-- 清除所有数据的复选框 -->


      <!-- 检查结果区域 -->
      <el-input
        style="margin-top: 10px"
        type="textarea"
        :rows="4"
        placeholder="清除原始数据保留检查结果"
        v-model="checkResult"
      ></el-input>

      <!-- 按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-check" @click="handleConfirm"></el-button>
        <el-button type="danger" icon="el-icon-close" @click="dialogVisible = false"></el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
        { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      dialogVisible: false, // 控制对话框是否可见
      selectedDate: '', // 选定的日期
      clearAll: false, // 是否清除所有数据
      checkResult: '' // 检查结果
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleConfirm() {
      // 确认操作的逻辑处理
      console.log('确认清除数据')
      alert('确认清除数据')
      this.dialogVisible = false
    },
    handleHelp() {
      // 帮助信息的逻辑处理
      alert('帮助信息')
    }
  }
}
</script>
<style scoped>
.history-data-clear {
  /* 样式设置 */
}
</style>
